<template>
	<view>
		<!-- 及格 -->
		<view class="wrap" v-if="examstate==true">
			<u-row gutter="16">
				<u-col span="12" text-align="center" style="padding-bottom: 30rpx;">
					<view class="demo-layout ">您的最终成绩：<span style="font-size: 60rpx;">{{list1.grade}}分</span></view>
				</u-col>
				<u-col span="12" text-align="center" style="padding-bottom: 20rpx;">
					<view class="demo-layout">恭喜你通过测试。赠送一次抽奖机会</view>
				</u-col>
				<u-col span="12" text-align="center">
					<almost-lottery :prize-list="prizeList" :prize-index="prizeIndex" @reset-index="prizeIndex = -1"
						@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish"
						v-if="prizeList.length" />

				</u-col>
			</u-row>
			<view>
				<button class="" @click="again" v-if="full==false">重新考试</button>
			</view>
			<u-modal v-model="show" :content="content"></u-modal>
		</view>
		<!-- 未及格 -->
		<view class="content" v-if="examstate==false">
			<u-row gutter="16">
				<u-col span="12" text-align="center" style="padding-bottom: 20rpx;">
					<view class="demo-layout ">共获得<span style="font-size: 60rpx;">{{list1.grade}}分</span></view>
				</u-col>
				<u-col span="12" text-align="center">
					<view class="demo-layout " >很遗憾您未能通过测试，请重新考试</view>
				</u-col>

				<u-col span="12" text-align="center">
					<view>
						<button class="button-demo" @click="again">重新考试</button>
					</view>
				</u-col>
				<view style="position: fixed;bottom:0;">广告位</view>
			</u-row>
		</view>
		<!-- 底部广告 -->
		<u-modal v-model="show1" :content="content1"></u-modal>
		<view style="position: fixed;bottom:0; height: 200rpx;width: 100%; margin-left: -23rpx;" v-show="show2==true">
			<view class="u-demo-area">
				<u-swiper @change1="change" :height="200" :list="list" :title="title" :effect3d="effect3d"
					:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click1"></u-swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import LuckyWheel from 'uni-luck-draw/lucky-wheel'
	import AlmostLottery from 'components/almost-lottery/almost-lottery.vue'

	export default {
		components: {
			LuckyWheel,
			AlmostLottery
		},
		data() {
			return {
				full:false,
				// 获奖奖品序号，每次抽奖结束后需要重置为 -1
				prizeIndex: -1,
				// 奖品数据
				prizeList: [{
						prizeId: 1,
						name: '谢谢参与',
						stock: 10,
						weight: 1,
						prizeImage: ''
					},
					{
						prizeId: 2,
						name: '谢谢参与',
						stock: 0,
						weight: 0,
						prizeImage: ''
					},
					{
						prizeId: 3,
						name: '谢谢参与',
						stock: 1,
						weight: 0
					},
					{
						prizeId: 4,
						name: '谢谢参与',
						stock: 0,
						weight: 0
					},
					{
						prizeId: 5,
						name: '谢谢参与',
						stock: 3,
						weight: 3
					},
					{
						prizeId: 6,
						name: '谢谢参与',
						stock: 8,
						weight: 2
					},
					{
						prizeId: 7,
						name: '谢谢参与',
						stock: 100,
						weight: 10000
					},
					{
						prizeId: '0',
						name: '谢谢参与',
						stock: 100,
						weight: 1000
					}
				],
				// 中奖下标
				prizeIndex: -1,
				// 中奖类目名称
				targetName: '',
				// 奖品是否设有库存
				onStock: true,
				// 是否由前端控制概率，默认不开启
				onFrontend: false,
				// 权重随机数的最大值
				weightTotal: 0,
				// 权重数组
				weightArr: [],
				show2: true,
				ifprize: false,
				examinationId: '',
				show1: false,
				content1: "123456",
				/* 轮播图 */
				list: [],
				list1: [],
				title: false,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				effect3d: true,
				//是否及格
				examstate: false,
				//是否已经抽过奖
				state: false,
				show: false,
				content: '您已经抽过了请勿重复抽取',
				blocks: [{
					padding: '13px',
					background: '#d64737'
				}],

				listluck: []
			}
		},
		onLoad: function(option) {
			this.examinationId = option.examinationId
			this.$u.api.selectrecommend({
				recommendPage: "0"
			}).then(res => {
				this.list = res.rows;
				console.log(this.list);
			});
			this.$u.api.selectExaminationFrontResult({
				studentId: getApp().globalData.studentId,
				examinationId: option.examinationId
			}).then(res => {
				this.list1 = res.rows[0];
				console.log(this.list1)
				this.full=this.list1.full;
				console.log(this.full)
				this.examstate = this.list1.pass;
				this.state = this.list1.prizeType;
				this.prize = this.list1.examinationFrontPrize;
				for (var i = 0; i < this.prize.length; i++) {
					this.prizeList[i].name = this.prize[i].prizeName
					this.prizeList[i].prizeId = this.prize[i].prizeId
					this.listluck[i] = this.prize[i].prizeName
				}
			});
		},
		methods: {
			again(){
				uni.navigateTo({
					url: '/pages/examination/subject?testid='+this.examinationId,
				})
			},
			handleDrawStart() {
				// 这里需要处理你的中奖逻辑，并得出 prizeIndex
				// 请查看示例项目中的代码
				if (this.prizeing) return
				this.prizeing = true
				this.targetName = ''
				let list = [...this.prizeList]
				// 判断是否由前端控制概率
				// 前端控制概率的情况下，需要拿到最接近随机权重且大于随机权重的值
				// 模拟请求获取中奖信息
				let stoTimer = setTimeout(() => {
					clearTimeout(stoTimer)
					stoTimer = null
					// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
					let prizeId = "0"
					//判断抽奖权限
					if (this.state == true) {
						console.log(this.examinationId)
						this.$u.api.luckDraw({
							studentId: getApp().globalData.studentId,
							examinationId: this.examinationId
						}).then(res => {
							prizeId = res.rows[0].prizeId
							console.log(prizeId)
							for (let i = 0; i < list.length; i++) {
								let item = list[i]
								if (item.prizeId === prizeId) {
									// 中奖下标
									this.prizeIndex = i
									break
								}
							}
						});
						this.state = false;
					} else {
						this.show = true;
					}
					// 先开始旋转
				}, 0)
			},
			// 本次抽奖结束
			handleDrawEnd() {
				this.prizeing = false
				// 旋转结束后，可以执行拿到结果后的逻辑
				let prizeName = this.prizeList[this.prizeIndex].name
				console.log(prizeName)
				if(prizeName=='谢谢参与'){
					this.content1 = "谢谢参与，下次继续努力"
				}else{
					this.content1 = "恭喜抽中" + prizeName + "请查看个人中心-我的奖品。到相应地点兑奖"
				}
				this.show1 = true
			},
			handleDrawFinish(res) {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					mask: true,
					icon: 'none'
				})
			},
			//轮播
			change1(index) {
				// console.log(index);
			},
			click1() {
				// console.log(index);
			},
			open() {
				this.show = true;
			},

		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;

	}

	.choujiang {
		height: 40px;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.content {
		padding: 24rpx;
		display: flex;
		font-size: 35rpx;
	}

	.button-demo {
		width: 300rpx;
		height: 300rpx;
		border-radius: 150rpx 150rpx 150rpx 150rpx;
		background-color: #849bf3;
		color: #ffffff;
		margin-top: 250rpx;
		font-size: 50rpx;
		line-height: 280rpx;
		/*针对IE*/
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;

	}

	.choujiang {
		height: 40px;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}


	.footer {

		position: fixed;
		bottom: 0; //可以更改为自己的需求距离底部的长度
	}
</style>
